<%@page contentType="text/html" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../static/css/animate.min.css" />
<style>
	.post{
		background-color: white;
		margin-bottom: 0.5em;
		padding: 1.5em 2em 0em 2em;
	}
	
	/* 页眉 */
	.page-head{border: 0px #000 solid;position: relative;}
	.page-head img{width: 5rem;height: 5rem;border-radius: 50%;}
	.puname{font-size: 1.1em;margin: auto 0.3em; position: relative;top: 3px;}
	.ptime{color: #666;margin-left: 1em;}
	.p-next{position: absolute;right: 0.5em;top: 0.5em;width:2em;line-height: 2em;text-align: center;color: #999;}
	
	/* 页身体 */
	.phh{display: block;color: #000; margin: 0.7em 0px;}
	.ptext{border: 0px #000 solid;max-height: 40em;overflow: hidden;}
	.zhankai{line-height: 2em;}
	
	/* 页脚 */
	.page-foot{line-height: 5rem;margin-top: 0.2em;color: #333;}
	.page-foot span{padding-right: 0.5em;display: inline-block;}
	.page-foot span:hover{color: red;cursor: pointer;}
	.page-foot i{font-size: 1.3em; position: relative;top: 2px;}
	
	.ctsfox{
		width: 100%;
		border: 1px #000 solid;
		min-height: 5rem;
	}
	
	
	
</style>
<script type="text/javascript">
	
	$(function(){
		
		//遍历，哪些应该显示展开按钮
		$(".ptext").each(function(){
			if($(this).css("height")==$(this).css("max-height")){
				$(this).next().show();
			}
		})
		
		//点击展开按钮动画
		$(".zhankai").click(function(){
			$(this).animate({"margin-left":'2em',"opacity":"0"},200,function(){
				$(this).hide();
				$(this).prev().css("max-height","none");
			});
		})
		
		//点击帖子评论
		$(".p_ctnum").click(function(){
			var pid=$(this).parent().parent().children("[name=pid]").val();
			
			window.open("../post/rpt.html?pid="+pid);
		})
		
		//左飞出
		$(".p-next").click(function(){
			var ts=$(this).parent().parent();
			txfn(ts,"bounceOutLeft",500);
		})
		//特效函数
		var txfn=function($ts,tx,x){
			$ts.addClass("animated "+tx);
			setTimeout(function(){
				$ts.slideUp(500);
			},x)
		}
		
	})
	
</script>

<c:forEach items="${for_posts}" var="p" >
	<!-- 帖子 -->
	<div class="post">
		
		<input type="hidden" name="pid" value="${p.pid}" />
		<!-- 页眉 -->
		<div class="page-head">
			
			<input type="hidden" name="uid" value="${p.uid}" />
			<a href="../user/rus.html?uid=${p.uid}" target="_blank">
				<img src="../../static/tu/${p.uid}/tou.png"/>
				<span class="puname yx-hover-red yx-color-one">${p.uname}</span>
				<span class="ptx layui-badge layui-bg-blue usee_tx">${p.ujf}</span>
				<span class="ptime yx-oneline">${p.p_time}</span>
			</a>
			<span class="p-next yx-hover-red" title="下一个"><i class="layui-icon">&#xe65a;</i></span>
			
		</div>
		
		<!-- 正文 -->
		<a href="../post/rpt.html?pid=${p.pid}" target="_blank" class="phh yx-hover-red"><h3>${p.p_hh}</h3></a>
		
		<div class="ptext ptextstyle">
			${p.p_text}
		</div>
		<span class="zhankai yx-hide yx-color-one yx-hover-red">展开 <i class="layui-icon">&#xe65b;</i></span>
		
		<!-- 页脚 -->
		<div class="page-foot">
			<span class="pzan" onclick="pzan(this,1)" title="点赞"><i class="layui-icon">&#xe6c6;</i> <span>${p.p_zan}</span></span>
			<span class="pcai" onclick="pzan(this,2)" title="点踩"><i class="layui-icon">&#xe6c5;</i> <span>${p.p_cai}</span></span>
			<span class="p_jb" onclick="pzan(this,3)" title="举报">J <span>${p.p_jb}</span></span>
			<span class="p_ctnum" title="评论"><i class="layui-icon">&#xe63a;</i> <span>${p.p_ctnum}</span></span>
		</div>
		<!--<iframe class="ctsfox" src="../ct/rct.html"></iframe>-->
		
	</div>
</c:forEach>

<script type="text/javascript">
	//对error图片尝试二次加载
	$(".ptext img").one("error",function(){
		var basepath="${basepath}";
		var newsrc=basepath+$(this).attr("src");
		$(this).attr("src",newsrc);
	})
</script>















